<template>
  <div class="me">
    <div class="main">
      <el-aside class="aside">
        <span class="person"> 个人中心 </span>
        <el-menu class="el-menu-vertical-demo" router>
          <el-menu-item index="/me/cart">
            <i class="el-icon-shopping-cart-1"></i>
            <span style="letter-spacing: 1px; font-size: 17px" slot="title"
              >购物车</span
            >
          </el-menu-item>

          <el-menu-item index="/me/order">
            <i class="el-icon-s-order"></i>
            <span style="letter-spacing: 1px; font-size: 17px" slot="title"
              >我的订单</span
            >
          </el-menu-item>

          <el-menu-item index="/me/setting">
            <i class="el-icon-s-tools"></i>
            <span style="letter-spacing: 1px; font-size: 17px" slot="title"
              >基本设置</span
            >
          </el-menu-item>
        </el-menu>
      </el-aside>
      <div class="right_content"><router-view /></div>
    </div>
  </div>
</template>

<script>
export default {
  return: {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.me {
  width: 100%;
  margin-top: 25px;

  .main {
    width: 1100px;
    margin: 0 auto;
    height: 1000px;
    // border: 1px solid #ddd;

    .aside {
      width: 250px;
      height: 1000px;
      float: left;
      // background: pink;
      border: 1px solid #ddd;
      .person {
        padding-left: 60px;
        letter-spacing: 2px;
        font-size: 27px;
        display: block;
        padding-top: 40px;
        // background: yellow;
      }
      .el-menu-vertical-demo {
        margin-top: 30px;
        border-right: none;

        .el-menu-item {
          margin-top: 10px;
        }
      }
    }
    .right_content {
      overflow: hidden;
      float: right;
      width: 799px;
      height: 999px;
      // background: blue;
      border: 1px solid #ddd;
      margin-top: -1px;
      border-left: none;
    }
  }
}
</style>